<!DOCTYPE html>
<html lang="en" class="h-100">
    <meta charset="UTF-8">
    <title>SinaBot</title>
    <link rel="stylesheet" type="text/css" href="./stylesheets/bootstrap.min.css">

    <style>
        a.nav-link {
            /*border-bottom: 1px solid #dee2e6;*/
            color: #808080 !important;
        }

        .nav-pills .nav-link {
             border-radius: 0;
        }
        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            background-color: #2A2A2A;
            color: white !important;
        }
        .label_s, .star_s {
            display: block;
            height: 34px;
            margin-right: 16px;
            color: #fff;
            font-size: 14px;
        }
        .lable_cm {
            float: left;
            position: relative;
            display: inline-block;
            width: 75px;
            height: 30px;
            background: url(./images/label.png) no-repeat;
            opacity: 1;
            font-size: 12px;
            text-indent: 10px;
            margin: 0 12px 16px 0;
            text-align: center;
        }
        .star.active {
            background: url(./images/star_a.png);
            background-size: cover;
            -webkit-background-size: cover;
        }

        .star {
            display: inline-block;
            position: relative;
            width: 36px;
            height: 36px;
            background: url(./images/star.png) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            margin: 0 12px 0 -5px;
        }
        .lable_ipt {
            width: 68px;
            border: 0;
            background: transparent;
            color: #fff;
            font-size: 12px;
            margin-left: -3px;
            text-align: center;
        }
        .lable_s3 {
            background: url(./images/label_none.png) no-repeat;
        }

        .lable_cm.del .l_s_b, .lable_cm.add .l_s_b {
            position: absolute;
            display: block;
            width: 23px;
            height: 23px;
            background: url(./images/del.png) no-repeat;
            right: -11px;
            top: -11px;
        }
        .lable_cm.add .l_s_b {
            background: url(./images/add.png) no-repeat;
        }
        .lable_box, .star_box {
            /* height: 30px; */
            line-height: 30px;
            padding: 0px 0 0 6px;
            margin-top: 0px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            /*color: #a6a6a6;*/
            color: white;
            overflow: hidden;
            position: relative;
        }
        #v-pills-tab a{
            cursor: pointer;
        }
        /*.c_b_f::before {*/
            /*content: "可使用↑ ↓快速切换文章";*/
            /*display: block;*/
            /*text-align: center;*/
            /*font-size: 14px;*/
            /*color: rgb(128, 128, 128);*/
            /*position: relative;*/
            /*z-index: 1;*/
            /*width: 150px;*/
            /*white-space: nowrap;*/
            /*margin: 30px auto 10px;*/
            /*background: rgb(26, 26, 26);*/
            /*padding: 0px 5px;*/
        /*}*/
        .bg-light {
            background-color: #ffffff!important;
        }
    </style>


</head>
<body class="h-100" style="background:#1a1a1a; color: white;">


<nav class="navbar navbar-expand-lg navbar-light " style="background-color: #d9d9d9">
    <a class="navbar-brand" href="#"><img src="images/sina_nobg.png" style="height: 45px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#" style="color:black">新闻文章配图系统 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    分类列表
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(-1)">全部</a>
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(0)">新文章</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(1)">财经</a>
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(2)">科技</a>
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(13)">育儿</a>
                    <a class="dropdown-item" href="#" onclick="filterArticlesByCategory(19)">情感</a>
                </div>
            </li>
            <!--<li class="nav-item">-->
                <!--<a class="nav-link" href="#">分类汇总</a>-->
            <!--</li>-->
        </ul>
        <!--<form class="form-inline my-2 my-lg-0">-->
            <!--&lt;!&ndash;&lt;!&ndash;<input class="form-control mr-sm-2" type="search" placeholder="搜索..." aria-label="Search">&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;&lt;!&ndash;<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>&ndash;&gt;&ndash;&gt;-->
            <!--<button class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#newArticle">新文章</button>-->
        <!--</form>-->
        <button class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#newArticle">新文章</button>
        <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#newArticle">新文章</button>-->
    </div>
</nav>

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="comfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="color:black">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    确认
                </h4>
                <button type="button" class="close" style="outline:none" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                确认选择该配图？
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="newArticle" tabindex="-1" role="dialog" aria-labelledby="newArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="color:black">
            <div class="modal-header">
                <h4 class="modal-title" id="newArticleModalLabel">新建查询文章</h4>
                <button type="button" class="close" style="outline:none" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>

            <div class="modal-body">
                <form data>
                    <fieldset class="form-group has-warning">
                        <label for="new_title">标题</label>
                        <input type="text" class="form-control" id="new_title" name="new_title"  placeholder="请输入文章标题">
                    </fieldset>

                    <fieldset class="form-group">
                        <label for="new_category">文章类别</label>
                        <select class="form-control" id="new_category">
                            <option value="0">无</option>
                            <option value="1">财经</option>
                            <option value="2">科技</option>
                            <option value="13">育儿</option>
                            <option value="19">情感</option>
                        </select>
                    </fieldset>

                    <fieldset class="form-group">
                        <label for="new_content">内容</label>
                        <textarea class="form-control" id="new_content" rows="5"></textarea>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-outline-success" data-dismiss="modal"
                        onclick="addNewArticle()">查询</button>
            </div>
        </div>
    </div>
</div>

<div class="container h-100">

<!--<div class="" style="margin:20px 10px;">-->
    <!--<div class="row">-->
        <!--<div class="col-4 bd-sidebar">-->
            <!--<ul class="list-group list-group-flush">-->
                <!--<li class="list-group-item active">Cras justo odio</li>-->
                <!--<li class="list-group-item">Dapibus ac facilisis in</li>-->
                <!--<li class="list-group-item">Morbi leo risus</li>-->
                <!--<li class="list-group-item">Porta ac consectetur ac</li>-->
                <!--<li class="list-group-item">Vestibulum at eros</li>-->
            <!--</ul>-->
        <!--</div>-->


        <!--<div class="col-4" style="background: #e9ecef;">-->

        <!--</div>-->

        <!--<div class="col-4">-->

        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<div class="row h-100">
    <div class="col-4 h-100" style="max-height: 100%; overflow-y: scroll;padding-right: 0;">
        <div style="margin: 25px auto; padding-left: 16px;">
            <span>--------------文章列表---------------</span>
        </div>
        <div class="nav flex-column nav-pills c_b_f" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="color: #808080 !important;">
        </div>
    </div>
    <!--background:#dee2e6;-->
    <div class="col-5 h-100" style="max-height: 100%; overflow-y: scroll;padding-top: 40px;padding-bottom: 20px;background: #2A2A2A;" id="articlePanel">
        <h2></h2>
        <!--<p><small>This line of text is meant to be treated as fine print.</small></p>-->
        <p id="content" style="padding-top: 15px;">
        </p>
    </div>
    <div class="col-3 h-100" style="max-height: 100%; overflow-y: scroll; padding-top:20px;padding-bottom:20px;padding-left:7px;padding-right:0;background: #2A2A2A;">
        <div class="container" style="background: #313131;padding:0px;">

            <section class="c_b_b_top" id="rightPanel">
                <!--<div class="lable_box">-->
                    <!--<span class="label_s">标签</span>-->
                    <!--<em class="lable_s1 lable_cm">-->
                        <!--<span class="lable_txt">ddd</span>-->
                    <!--</em>-->
                    <!--&lt;!&ndash;<select class="s_wap hide">&ndash;&gt;-->
                        <!--&lt;!&ndash;<option value="">选择分类</option>&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;&ndash;&gt;<option value="娱乐">娱乐</option><option value="影视">影视</option><option value="财经">财经</option><option value="体育">体育</option><option value="时政">时政</option><option value="国际">国际</option><option value="社会">社会</option><option value="科技">科技</option><option value="数码">数码</option><option value="科学">科学</option><option value="军事">军事</option><option value="教育">教育</option><option value="历史">历史</option><option value="汽车">汽车</option><option value="搞笑">搞笑</option><option value="房产">房产</option><option value="时尚">时尚</option><option value="星座">星座</option><option value="育儿">育儿</option><option value="情感">情感</option><option value="美食">美食</option><option value="健康">健康</option><option value="家居">家居</option><option value="风水">风水</option><option value="宗教">宗教</option><option value="旅游">旅游</option><option value="职场">职场</option><option value="动漫">动漫</option><option value="收藏">收藏</option><option value="文化">文化</option><option value="宠物">宠物</option><option value="游戏">游戏</option><option value="摄影">摄影</option><option value="美女">美女</option><option value="彩票">彩票</option><option value="天气">天气</option><option value="音乐">音乐</option><option value="其他">其他</option>&ndash;&gt;-->
                    <!--&lt;!&ndash;</select>&ndash;&gt;-->
                <!--</div> &lt;!&ndash;&ndash;&gt; &lt;!&ndash;&ndash;&gt;-->

            </section>
            <div></div>
        </div>

    </div>
</div>
</div>
</body>
<script src="./javascripts/jquery.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/index.js"></script>
</html>